import React from 'react';
import { Grid } from 'antd-mobile';
import { 
  UserOutline, 
  EyeOutline, 
  SetOutline, 
  SmileOutline,
  UpOutline,
  LinkOutline,
  SoundOutline,
  BellOutline
} from 'antd-mobile-icons';
import './ConsultationSection.scss';

interface DepartmentItem {
  id: number;
  name: string;
  icon: React.ReactNode;
  onClick?: () => void;
}

const ConsultationSection: React.FC = () => {
  const departments: DepartmentItem[] = [
    {
      id: 1,
      name: '内科',
      icon: <UserOutline className="department-icon" />,
      onClick: () => console.log('内科')
    },
    {
      id: 2,
      name: '眼科',
      icon: <EyeOutline className="department-icon" />,
      onClick: () => console.log('眼科')
    },
    {
      id: 3,
      name: '骨科',
      icon: <SetOutline className="department-icon" />,
      onClick: () => console.log('骨科')
    },
    {
      id: 4,
      name: '小儿科',
      icon: <SmileOutline className="department-icon" />,
      onClick: () => console.log('小儿科')
    },
    {
      id: 5,
      name: '传染病科',
      icon: <UpOutline className="department-icon" />,
      onClick: () => console.log('传染病科')
    },
    {
      id: 6,
      name: '皮肤性病',
      icon: <LinkOutline className="department-icon" />,
      onClick: () => console.log('皮肤性病')
    },
    {
      id: 7,
      name: '耳鼻喉科',
      icon: <SoundOutline className="department-icon" />,
      onClick: () => console.log('耳鼻喉科')
    },
    {
      id: 8,
      name: '精神病科',
      icon: <BellOutline className="department-icon" />,
      onClick: () => console.log('精神病科')
    }
  ];

  return (
    <div className="consultation-section">
      <h2 className="section-title">问诊咨询</h2>
      <div className="departments-grid">
        <Grid columns={4} gap={16}>
          {departments.map((dept) => (
            <Grid.Item key={dept.id} onClick={dept.onClick}>
              <div className="department-item">
                <div className="department-icon-wrapper">
                  {dept.icon}
                </div>
                <span className="department-name">{dept.name}</span>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>
    </div>
  );
};

export default ConsultationSection;
